<!-- 自主直播审核 -->
<template>
  <div class="self-live-audit">
    <div class="self-live-audit__header">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()">
        <el-form-item label="直播间名称">
          <br /><br />
          <el-input v-model="formInline.planName" clearable style="margin-left: -85px; width: 200px"></el-input>
        </el-form-item>

        <el-form-item label="状态">
          <br /><br />
          <el-select v-model="formInline.publishStatus" clearable style="margin-left: -40px; width: 200px">
            <el-option label="全部" value=""></el-option>
            <el-option label="已发布" value="1"></el-option>
            <el-option label="未发布" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="margin-top:45px;text-align:right;">
          <el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
          <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
        </el-form-item>
      </el-form>

      <div class="self-live-audit__header--action">
        自动审核：
        <el-switch v-model="autoApproveStoreOwn" @change="changeValue" active-text="开" inactive-text="关">
        </el-switch>
      </div>
    </div>

    <div class="table-wrapper">
      <el-table :data="tableData" style="width: 100%" border height="580px"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading">
        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
        <el-table-column prop="planName" label="直播间名称" align="center" :min-width="200"></el-table-column>
        <el-table-column prop="planCode" label="直播间编号" align="center" :min-width="200"></el-table-column>
        <el-table-column prop="storeName" label="门店名称" align="center" :min-width="200"></el-table-column>
        <el-table-column prop="storeType" label="直播时间" align="center" :min-width="200">
          <template slot-scope="scope">
            <template v-for="item, index in scope.row.zbHomeDTOList">
              {{ item.startTime + " - " + item.endTime }}
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="countSum" label="参与直播商品数" align="center" :min-width="200"></el-table-column>
        <el-table-column prop="createUser" label="申请人" align="center" :min-width="200"></el-table-column>
        <el-table-column prop="createTime" label="发起时间" align="center" :min-width="200"></el-table-column>
        <el-table-column prop="approvalStatus" label="状态" align="center" :min-width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.approvalStatus === 1">未审批</span>
            <span v-if="scope.row.approvalStatus === 2">已审批</span>
            <span v-if="scope.row.approvalStatus === 3">已驳回</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button @click="seedetail(scope.row)" type="text" size="mini">详情</el-button>
            <el-button @click="handleClick(scope.row)" type="text" size="mini"
              v-if="scope.row.approvalStatus == 1 && !autoApproveStoreOwn">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="block" style="margin-top:2px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { storeOwnZbList } from '@/api/liveplan';
import { systemparameterList, updateinfo } from "@/api/systemparameter";
export default {
  data() {
    return {
      formInline: {
        planName: '',
        approvalStatus: '',
      },
      uuid: '',
      autoApproveStoreOwn: false,
      loading: false,
      total: 0,
      tableData: [],
      listQuery: {
        current: 1,
        size: 10,
      },
    };
  },
  created() {
    this.rolemanageone();
    this.getList();
  },
  methods: {
    rolemanageone() {
      let data = {
        size: 1,
        current: 1,
        condition: {
          name: "",
          code: "auto_store_approve"
        }
      };
      systemparameterList(data).then(res => {
        for (let i in res.records) {
          this.uuid = res.records[i].uuid;
          if (res.records[i].value == "1") {
            this.autoApproveStoreOwn = true
          }
          else {
            this.autoApproveStoreOwn = false
          }
        }
      });
    },
    search() {
      this.listQuery.current = 1;
      this.getList();
    },
    kong() {
      this.formInline = this.$options.data().formInline;
      this.search();
    },
    search() {
      this.listQuery.current = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    getList() {
      this.loading = true;
      const data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          ...this.formInline,
        }
      };

      storeOwnZbList(data).then((res) => {
        console.log('~🚀🚀🚀🚀~🚀🚀🚀🚀~🚀🚀🚀🚀~ ~ res:', res);
        this.total = res.total;
        this.tableData = res.records;
      }).finally(() => {
        this.loading = false;
      });
    },
    changeValue() {
      const data = {
        uuid: this.uuid,
        value: this.autoApproveStoreOwn ? "1" : "0"
      };
      updateinfo(data).then(res => {
        if (res.code == 1) {
          this.$message({
            showClose: true,
            message: "操作成功",
            type: "success"
          });
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: "error"
          });
        }
        this.rolemanageone();
      });
    },

    seedetail(v) {
      this.$router.push({
        name: "infoApprovalDetail",
        params: {
          v: v,
          type: 'selfAudit',
          shen: true
        }
      });
    },

    handleClick(v) {
      this.$router.push({
        name: "infoApprovalDetail",
        params: {
          v: v,
          shen: true,
          type: 'selfAudit',
          shenhe: true,
          formInline: this.formInline
        }
      });
    }
  },
};
</script>
<style lang="less" scoped>
.self-live-audit {
  &__header {
    display: flex;

    &--action {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 35px;
      font-size: 14px;
      color: #4c4c4c;
    }
  }

  .demo-form-inline {
    flex: 1;

    /deep/ .el-form-item__content {
      line-height: normal;
    }
  }

  .table-wrapper {
    /deep/ .el-table__fixed-right .el-table__fixed-body-wrapper {
      height: 518px !important;
    }
  }
}
</style>
